<template>
  <div style="display: flex; justify-content: flex-end">
    <div class="carousel-content" @click="toggleNewsSort">
      <div>等级</div>
      <div class="icon-div">
        <svg-icon
          icon-class="public-CaretUpFilled"
          :class-name="sortType === 1 ? 'change-icon' : ''"
        />
        <svg-icon
          icon-class="public-CaretDownFilled"
          :class-name="sortType === 2 ? 'change-icon' : ''"
        />
      </div>
    </div>
  </div>
  <div class="carousel-container" style="height: 200px">
    <div
      ref="newsCarousel"
      class="carousel-wrapper"
      :class="{ paused: !isPlaying }"
      @mouseenter="pauseNews"
      @mouseleave="resumeNews"
    >
      <template v-for="item in honorList">
        <div class="honor-content">
          <div class="honor-content-left">
            <div class="user-name">{{ item.id }}啊士大夫萨芬撒打发</div>
          </div>
          <div class="dept-name">sa地方式打法是</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from "vue";

const sortType = ref(null);
const listData = ref([]);
const newsCarousel = ref(null);
const honorList = ref([]);
const isPlaying = ref(true);
const animationDuration = ref(20);
// 暂停轮播
const pauseNews = () => {
  isPlaying.value = false;
};
// 恢复轮播
const resumeNews = () => {
  isPlaying.value = true;
};
// 计算并设置动画持续时间
const setAnimationDuration = () => {
  const containerHeight = newsCarousel.value.parentElement.offsetHeight;
  const contentHeight = newsCarousel.value.offsetHeight;
  // 根据内容高度和速度计算动画持续时间
  const duration = (contentHeight / containerHeight) * 4;
  animationDuration.value = duration;
  // 应用CSS变量设置动画持续时间
  newsCarousel.value.style.setProperty("--animation-duration", `${duration}s`);
};
// 获取勋章列表
const getMedalHomeListData = () => {
  honorList.value = [
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
  ];

  nextTick(() => {
    listData.value = JSON.parse(JSON.stringify(honorList.value));
    setAnimationDuration();
  });
};
// 切换排序
const toggleNewsSort = () => {
  const el = newsCarousel.value;
  isPlaying.value = false;

  if (sortType.value == null) {
    sortType.value = 1;
  } else if (sortType.value == 1) {
    sortType.value = 2;
  } else {
    sortType.value = null;
  }

  let newList = JSON.parse(JSON.stringify(listData.value));
  if (sortType.value == 1) {
    newList.sort((a, b) => a.id - b.id);
  } else if (sortType.value == 2) {
    newList.sort((a, b) => b.id - a.id);
  }
  honorList.value = newList;

  // 重置位置
  el.style.animation = "none";
  el.offsetHeight;

  // 恢复动画
  setTimeout(() => {
    el.style.animation = "";
    isPlaying.value = true;
  }, 10);
};

getMedalHomeListData();
</script>
<style lang="scss" scoped>
// 轮播图
.carousel-container {
  width: calc(100%);
  height: calc(100% - 70px);
  overflow: hidden;
  position: relative;
  .carousel-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    /* 使用CSS变量设置动画持续时间 */
    animation: scroll calc(var(--animation-duration, 20s)) linear infinite;
  }
  .carousel-wrapper.paused {
    animation-play-state: paused;
  }

  /* 定义滚动动画 */
  @keyframes scroll {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-50%); /* 滚动到一半高度，实现无缝循环 */
    }
  }
  // 轮播内容
  .honor-content {
    padding: 10px 13px;
    cursor: pointer;
    &:nth-child(odd) {
      background-color: #fff;
    }
    &:nth-child(even) {
      background-color: #f5f8f6;
    }
    display: flex;
    align-items: center;

    justify-content: space-between;
    .honor-content-left {
      width: 33%;
      display: flex;
      align-items: center;
      // 头像
      .avatar-div {
        background: url("@/assets/layout/user-img.png") no-repeat;
        padding: 2px;
        background-size: 100%;
        margin-right: 10px;
        .avatar-img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      // 用户名
      .user-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        font-weight: 700;
        color: #1a1d1f;
      }
    }

    // 部门
    .dept-name {
      text-align: center;
      width: 33%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    // 星星
    .sidebar-logo-star {
      display: flex;
      justify-content: flex-end;
      width: 33%;
      .star-rating-class {
        width: 25px;
        height: 25px;
      }
    }
  }
}
.carousel-content {
  display: flex;
  align-items: center;
  margin-right: 10px;
  cursor: pointer;
  padding: 5px 0;
  .icon-div {
    display: flex;
    flex-direction: column;
    justify-content: center;

    svg {
      width: 12px;
      height: 10px;
      fill: #b5c0ca;
    }
    .change-icon {
      fill: #768696;
    }
  }
}
</style>
